<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>让坦克开起来</title>
		<style type="text/css">
			body{
				background-image: url(images/grassland.png);
			}
			img {
				position: fixed;
				left: 500px;
				top: 400px;
			}
		</style>
	</head>
	<body>
            <img src="images/up.png" alt="">
		<script>
			// 编写代码，让坦克能上下左右移动
			// 获取图片
			var Oimg = document.querySelector('img')
			// 获取图片的属性
			var style = getComputedStyle(Oimg)
			// 记录图片的初始位置
			var L = parseInt(style.left)
			var T = parseInt(style.top)
			// 绑定键盘按下事件
			window.onkeydown = function(e) {
				console.log(e.key);
				// 判断方向键
				switch(e.key) {
						// 按下上方向键
					case 'ArrowUp':
						// 改变图片的src地址，控制转向
						Oimg.src = 'images/up.png'
						// 目标位置 = 初始位置 - 每次移动距离（这里设为10px）
						T = T - 10
						// 改变图片的top距离，控制移动
						Oimg.style.top = T + 'px'
						break;
					case 'ArrowDown':
						Oimg.src = 'images/down.png'
						T = T + 10
						Oimg.style.top = T + 'px'
						break;
					case 'ArrowLeft':
						Oimg.src = 'images/left.png'
						L = L - 10
						Oimg.style.left = L + 'px'
						break;
					case 'ArrowRight':
						Oimg.src = 'images/right.png'
						L = L + 10
						Oimg.style.left = L + 'px'
						break;
				}
			}

		</script>
	</body>
</html>
